<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 员工岗位分布 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="clearfix">
            <span>员工岗位分布</span>
          </div>
          <div id="jobChart" style="height: 350px;" />
        </el-card>
      </el-col>

      <!-- 员工性别比例 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="clearfix">
            <span>员工性别比例</span>
          </div>
          <div id="genderChart" style="height: 350px;" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 员工部门分布 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="clearfix">
            <span>员工部门分布</span>
          </div>
          <div id="deptChart" style="height: 350px;" />
        </el-card>
      </el-col>

      <!-- 员工入职时间趋势 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="clearfix">
            <span>员工入职时间趋势</span>
          </div>
          <div id="entryDateChart" style="height: 350px;" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getJobCountList } from '@/api/jobs'
import { getEmpGenderStats, getEmpDeptStats, getEmpEntryDateStats } from '@/api/statistics'

export default {
  data() {
    return {
      jobChart: null,
      genderChart: null,
      deptChart: null,
      entryDateChart: null
    }
  },
  mounted() {
    this.initCharts()
    window.addEventListener('resize', this.resizeCharts)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCharts)

    if (this.jobChart) this.jobChart.dispose()
    if (this.genderChart) this.genderChart.dispose()
    if (this.deptChart) this.deptChart.dispose()
    if (this.entryDateChart) this.entryDateChart.dispose()
  },
  methods: {
    initCharts() {
      // 初始化图表实例
      this.jobChart = echarts.init(document.getElementById('jobChart'))
      this.genderChart = echarts.init(document.getElementById('genderChart'))
      this.deptChart = echarts.init(document.getElementById('deptChart'))
      this.entryDateChart = echarts.init(document.getElementById('entryDateChart'))

      // 加载数据
      this.loadJobData()
      this.loadGenderData()
      this.loadDeptData()
      this.loadEntryDateData()
    },

    // 加载岗位数据
    loadJobData() {
      getJobCountList()
        .then(response => {
          const jobData = response.data.data

          this.jobChart.setOption({
            title: {
              text: '员工岗位分布',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: jobData.jobNames
            },
            series: [
              {
                name: '岗位人数',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: jobData.jobNames.map((name, index) => ({
                  name: name,
                  value: jobData.jobCounts[index]
                })),
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        })
        .catch(error => {
          console.error('获取岗位信息失败：', error)
          this.$message.error('获取岗位信息失败')
        })
    },

    // 加载性别数据
    loadGenderData() {
      // 模拟数据，实际项目中应该通过API获取
      getEmpGenderStats()
        .then(response => {
          const genderData = response.data.data || {
            labels: ['男', '女'],
            values: [15, 10]
          }

          this.genderChart.setOption({
            title: {
              text: '员工性别比例',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: genderData.labels
            },
            series: [
              {
                name: '性别比例',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: genderData.labels.map((label, index) => ({
                  name: label,
                  value: genderData.values[index]
                })),
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        })
        .catch(error => {
          console.error('获取性别统计失败：', error)
          // 使用模拟数据
          const mockData = {
            labels: ['男', '女'],
            values: [15, 10]
          }

          this.genderChart.setOption({
            title: {
              text: '员工性别比例',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: mockData.labels
            },
            series: [
              {
                name: '性别比例',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: mockData.labels.map((label, index) => ({
                  name: label,
                  value: mockData.values[index]
                })),
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        })
    },

    // 加载部门数据
    loadDeptData() {
      getEmpDeptStats()
        .then(response => {
          const deptData = response.data.data || {
            deptNames: ['技术部', '人事部', '财务部', '市场部', '运营部'],
            counts: [8, 4, 3, 5, 5]
          }

          this.deptChart.setOption({
            title: {
              text: '员工部门分布',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: deptData.deptNames,
              axisLabel: {
                interval: 0,
                rotate: 30
              }
            },
            yAxis: {
              type: 'value',
              name: '人数'
            },
            series: [
              {
                name: '部门人数',
                type: 'bar',
                data: deptData.counts,
                itemStyle: {
                  color: function(params) {
                    const colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622']
                    return colorList[params.dataIndex % colorList.length]
                  }
                }
              }
            ]
          })
        })
        .catch(error => {
          console.error('获取部门统计失败：', error)
          // 使用模拟数据
          const mockData = {
            deptNames: ['技术部', '人事部', '财务部', '市场部', '运营部'],
            counts: [8, 4, 3, 5, 5]
          }

          this.deptChart.setOption({
            title: {
              text: '员工部门分布',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: mockData.deptNames,
              axisLabel: {
                interval: 0,
                rotate: 30
              }
            },
            yAxis: {
              type: 'value',
              name: '人数'
            },
            series: [
              {
                name: '部门人数',
                type: 'bar',
                data: mockData.counts,
                itemStyle: {
                  color: function(params) {
                    const colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622']
                    return colorList[params.dataIndex % colorList.length]
                  }
                }
              }
            ]
          })
        })
    },

    // 加载入职时间数据
    loadEntryDateData() {
      getEmpEntryDateStats()
        .then(response => {
          const entryData = response.data.data || {
            months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            counts: [2, 4, 3, 6, 2, 5, 3, 7, 3, 1, 4, 5]
          }

          this.entryDateChart.setOption({
            title: {
              text: '员工入职时间趋势',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: entryData.months
            },
            yAxis: {
              type: 'value',
              name: '入职人数'
            },
            series: [
              {
                name: '入职人数',
                type: 'line',
                data: entryData.counts,
                markPoint: {
                  data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' }
                  ]
                },
                markLine: {
                  data: [
                    { type: 'average', name: '平均值' }
                  ]
                }
              }
            ]
          })
        })
        .catch(error => {
          console.error('获取入职时间统计失败：', error)
          // 使用模拟数据
          const mockData = {
            months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            counts: [2, 4, 3, 6, 2, 5, 3, 7, 3, 1, 4, 5]
          }

          this.entryDateChart.setOption({
            title: {
              text: '员工入职时间趋势',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: mockData.months
            },
            yAxis: {
              type: 'value',
              name: '入职人数'
            },
            series: [
              {
                name: '入职人数',
                type: 'line',
                data: mockData.counts,
                markPoint: {
                  data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' }
                  ]
                },
                markLine: {
                  data: [
                    { type: 'average', name: '平均值' }
                  ]
                }
              }
            ]
          })
        })
    },

    // 调整图表大小
    resizeCharts() {
      if (this.jobChart) this.jobChart.resize()
      if (this.genderChart) this.genderChart.resize()
      if (this.deptChart) this.deptChart.resize()
      if (this.entryDateChart) this.entryDateChart.resize()
    }
  }
}
</script>

<style scoped>
.chart-card {
  margin-bottom: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
